<template>
  <div class="net_work_box">
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      title="分配角色"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      width="650px"
    >
      <el-row :gutter="16" type="flex">
        <el-col :span="24">
          <el-input size="small" v-model="keyword" placeholder="输入关键字查询">
          </el-input>
        </el-col>
      </el-row>
      <el-checkbox-group
        class="check_list"
        v-model="checkIds"
        style="margin-top: 10px"
        v-if="checkListSearch.length !== 0"
      >
        <el-checkbox
          :label="item.id"
          v-for="item in checkListSearch"
          :key="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <div style="text-align: center; margin-top: 20px" v-else>暂无角色</div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button
          v-permission="[5, 'button']"
          size="mini"
          type="primary"
          @click="submitForm('formRef')"
          :loading="btnLoadin"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useRoles, useAssignedRoles } from "@/api/userAuth";
export default {
  props: {
    isedit: {
      type: Boolean,
      default: false,
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  components: {},
  computed: {
    checkListSearch() {
      return this.checkList.filter((item) => {
        return item.name.indexOf(this.keyword) !== -1;
      });
    },
  },
  data() {
    return {
      checkIds: [],
      checkList: [],
      keyword: "",
      btnLoadin: false,
    };
  },
  mounted() {},
  watch: {},
  methods: {
    //弹窗打开执行操作
    async handleOpen() {
      // 查询已分配的角色列表
      const res = await useAssignedRoles({ userId: this.id });
      this.checkList = res.data.data;
      this.checkIds = res.data.data
        .filter((item) => item.checked)
        .map((item) => item.id);
      //   useRoles(this.params).then((res) => {
      console.log("res ,打开弹框:>> ", res);
      //   });
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      this.checkIds = [];
      this.checkList = [];
      this.keyword = "";
      this.btnLoadin = false;
      this.$emit("update:showDialog", false);
      this.$emit("closeDialog", isRefresh);
    },
    //取消清空数据
    cancelEmpty() {
      this.deviceGroupForm = {};
    },
    // 提交
    async submitForm(formName) {
      this.btnLoadin = true;

      // let params = {};
      let params = { roleIds: this.checkIds.join(","), userId: this.id };
      // if (this.checkIds.length !== 0) {
      //   params = { roleIds: this.checkIds.join(","), userId: this.id };
      // } else {
      //   params = {
      //     userId: this.id,
      //   };
      // }
      console.log("this.checkIds :>> ", params);
      try {
        await useRoles(params);
        this.$msg({
          message: "分配成功",
          type: "success",
        });
        this.handleClose(true);
        const isRole = this.$store.state.user.user.userId == this.id;
        console.log("isRole :>> ", isRole);
        if (isRole) {
          await this.$store.dispatch("user/refreshToken");
          location.reload();
        }
      } finally {
        this.btnLoadin = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.check_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #f9f9f9;
  padding: 10px;
  padding-bottom: 0;
  /deep/ .el-checkbox {
    margin-right: 20px;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .el-checkbox__label {
      width: 100px;
      display: block !important;
      @include textoverflow(1);
    }
  }
}
</style>
